import React, { useEffect, useState } from 'react';
import { TagsOutlined } from '@ant-design/icons';
import './index.less';
import Layouts from '@/components/Layout';
import { Typography, Pagination, Divider, Tag, Empty, Spin } from 'antd';
import Activity from '@/components/Activity';
import { CommonData } from '@/types/common';
import { getType } from '@/service/api/common';
import { ActivityList, ActivitySearch } from '@/types/touractivity';
import { getActivityList } from '@/service/api/touractivity';
import { useLocation } from 'umi';
const ThingsToDo: React.FC = () => {
  const location = useLocation();
  const [advType, setAdvType] = useState<CommonData[]>([]);
  const [footType, setFootType] = useState<CommonData[]>([]);
  const [cultureType, setCultureType] = useState<CommonData[]>([]);
  const [lifeType, setLifeType] = useState<CommonData[]>([]);
  const [searchActivityQuery, setSearchActivityQuery] = useState<ActivitySearch>({
    pageNum: 1,
    pageSize: 9,
    tags: location['query'].tag ?? null,
  });
  const [activityList, setActivityList] = useState<ActivityList[]>([]);
  const [listLoading, setListLoading] = useState<boolean>(false);
  const [listTotal, setListTotal] = useState<number>(0);
  const [selectedTags, setSelectedTags] = useState<string[]>([]);
  const handleChange = (tag: string, checked: boolean) => {
    const nextSelectedTags = checked
      ? [...selectedTags, tag]
      : selectedTags.filter((t) => t !== tag);
    console.log('You are interested in: ', nextSelectedTags);
    setSelectedTags(nextSelectedTags);
    setSearchActivityQuery((searchActivityQuery) => ({
      ...searchActivityQuery,
      tags: nextSelectedTags.toString(),
    }));
  };
  const handleChangePage = (page: number, pageSize: number) => {
    setSearchActivityQuery({
      pageNum: page,
      pageSize,
      tags: selectedTags.toString(),
    });
  };
  const getTypeData = async (dictType: string) => {
    const { data }: { data: CommonData[] } = await getType({
      dictType,
    });
    switch (dictType) {
      case 'adv_tag':
        setAdvType(data);
        break;
      case 'foot':
        setFootType(data);
        break;
      case 'culture':
        setCultureType(data);
        break;
      case 'life':
        setLifeType(data);
        break;
    }
  };
  const getActivityListData = async () => {
    try {
      setListLoading(true);
      const { rows, total }: { rows: ActivityList[]; total: number } = await getActivityList(
        searchActivityQuery,
      );
      setActivityList(rows);
      setListTotal(total);
    } finally {
      setListLoading(false);
    }
  };
  useEffect(() => {
    getTypeData('adv_tag');
    getTypeData('foot');
    getTypeData('culture');
    getTypeData('life');
    const { tag } = location['query'];
    if (tag) {
      setSelectedTags([tag]);
    }
  }, []);
  useEffect(() => {
    getActivityListData();
  }, [searchActivityQuery]);
  return (
    <Layouts>
      <div className="country_warpper">
        <div className="tit_wrapper">
          <Typography.Title level={2} style={{ marginBottom: 0 }}>
            要做的事情
          </Typography.Title>
          <div className="sub_title">你对什么感兴趣？点击下面您感兴趣的内容并浏览我们的建议</div>
        </div>
        <Divider />
        <div className="filter_wrapper">
          <div className="filter_item">
            <div className="filter_type_tit">
              <Typography.Title
                level={5}
                style={{ margin: 0, fontWeight: 'normal', marginBottom: 10 }}
              >
                <TagsOutlined style={{ marginRight: 8 }} />
                冒险：
              </Typography.Title>
            </div>
            {advType.map((tag) => (
              <Tag.CheckableTag
                className="check_tag_item"
                key={tag.dictCode}
                checked={selectedTags.indexOf(tag.dictValue) > -1}
                onChange={(checked) => handleChange(tag.dictValue, checked)}
              >
                {tag.dictValue}
              </Tag.CheckableTag>
            ))}
          </div>
          <div className="filter_item">
            <div className="filter_type_tit">
              <Typography.Title
                level={5}
                style={{ margin: 0, fontWeight: 'normal', marginBottom: 10 }}
              >
                <TagsOutlined style={{ marginRight: 8 }} />
                食物：
              </Typography.Title>
            </div>
            {footType.map((tag) => (
              <Tag.CheckableTag
                className="check_tag_item"
                key={tag.dictCode}
                checked={selectedTags.indexOf(tag.dictValue) > -1}
                onChange={(checked) => handleChange(tag.dictValue, checked)}
              >
                {tag.dictValue}
              </Tag.CheckableTag>
            ))}
          </div>
          <div className="filter_item">
            <div className="filter_type_tit">
              <Typography.Title
                level={5}
                style={{ margin: 0, fontWeight: 'normal', marginBottom: 10 }}
              >
                <TagsOutlined style={{ marginRight: 8 }} />
                文化：
              </Typography.Title>
            </div>
            {cultureType.map((tag) => (
              <Tag.CheckableTag
                className="check_tag_item"
                key={tag.dictCode}
                checked={selectedTags.indexOf(tag.dictValue) > -1}
                onChange={(checked) => handleChange(tag.dictValue, checked)}
              >
                {tag.dictValue}
              </Tag.CheckableTag>
            ))}
          </div>
          <div className="filter_item">
            <div className="filter_type_tit">
              <Typography.Title
                level={5}
                style={{ margin: 0, fontWeight: 'normal', marginBottom: 10 }}
              >
                <TagsOutlined style={{ marginRight: 8 }} />
                生活：
              </Typography.Title>
            </div>
            {lifeType.map((tag) => (
              <Tag.CheckableTag
                className="check_tag_item"
                key={tag.dictCode}
                checked={selectedTags.indexOf(tag.dictValue) > -1}
                onChange={(checked) => handleChange(tag.dictValue, checked)}
              >
                {tag.dictValue}
              </Tag.CheckableTag>
            ))}
          </div>
        </div>
        <Spin tip="正在玩命加载..." size="large" spinning={listLoading}>
          <div className="data_wrapper">
            {activityList.map((item) => (
              <Activity
                key={item.id}
                id={item.id}
                country={item.country}
                remark={item.describes}
                userInfo={item.user}
                imgUrl={item.imgUrl}
                title={item.title}
                tags={item.tags}
                city={item.city}
              ></Activity>
            ))}
          </div>
        </Spin>
        <div className="pagination_wrapper">
          {listTotal !== 0 && (
            <Pagination
              current={searchActivityQuery.pageNum}
              total={listTotal}
              showTitle
              pageSize={searchActivityQuery.pageSize}
              showSizeChanger={false}
              onChange={handleChangePage}
            />
          )}
          {!listLoading && listTotal === 0 && (
            <Empty
              image={Empty.PRESENTED_IMAGE_SIMPLE}
              description="暂无活动，赶紧选择兴趣发现探险旅行活动吧！"
            />
          )}
        </div>
      </div>
    </Layouts>
  );
};
export default ThingsToDo;
